
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
    <style>
        .p{
            width: 180px;
            height: 20px;
        }

    </style>
</head>
<body onload="todolist()">
    <div id="taskList">
        <h1>待办事项清单</h1>
        <input class="p" type="text" id="todoTitle" placeholder='添加新事项' name="list">
        <input type="submit" id="addbutton" value="+" onclick="submit()" >
        <input type="text" id="delete"  placeholder="要删除的选项">
        <input onclick="del()" type="button" value="-">
        <p>
        <input name="name" type="radio" onchange=todolist(0)>未完成项
            <input name="name" type="radio" onchange=todolist(1)>已完成项
           <input name="name" type="radio" onchange=todolist('all') checked="checked">所有项<br/>

        <ul id="listBox">

        </ul>
    </div>
    <script>
        function todolist(completed){
            fetch("/todos"+'?completed='+completed)
            .then(res=>res.json())

                .then(data=>{
                    document.getElementById("listBox").innerHTML="";
                    var openData=data.todos;
                    console.log(openData)
                    for(var i=0;i<openData.length;i++){

                            var opt='<li><input type="checkbox" name="'+openData[i].id+'"onchange="isFinish(this.name)"><span>'+openData[i].title+'</span></li>'
                            document.getElementById('listBox').innerHTML += opt;

                    }
                });
        }
        function submit(){
            let value=document.getElementsByName("list")[0].value;
            let opts={
                method:'post',
                headers:{
                    'Content-Type':'application/x-www-form-urlencoded;'
                },
                body:"title="+value,
            }
            fetch('/todos',opts).then(response=>{
                let result =response.text();
                result.then(res=>{
                    document.getElementById('todoTitle').value = ""
                    todolist();
                })
            })
        }
    function Finish(id){
        let opts={
            method:'get',
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },
        }
        fetch('/todos/mark_completed'+'?id='+id,opts).then(response=>{
            let result=response.text();
            result.then(res=>{
                todolist();
            })
        })
    }
    function isFinish(id){
        if(id){
            Finish(id);
            todolist();
        }
    }
    function del(){
		var id=document.getElementById("delete").value;
		fetch('/todos/del'+'?id='+id)
		.then(res=>res.json())



	}



    </script>
</body>
</html>